<script setup lang="ts">
import { reactive, ref, watch, computed } from 'vue';
import { useBooleanStore } from '@/store';
import { Notification } from '@arco-design/web-vue';
import {
  sendRecallDeliveryPlan,
  sendRecallInventory,
  sendReCallCoordinate,
  sendRecallScanBack,
  sendChangedQuantityCode,
  sendUpdateDeliveryStatus,
  sendRecallTabDevlieryPlan,
  sendRecallTabInventory,
  sendRecallTabInvOut,
  sendRecallTabAllot,
  cancelTabAllot,
} from '@/api/inventory-management';

const props = defineProps<{
  tableData: any;
}>();
const columns: any[] = [
  {
    title: '序号',
    dataIndex: 'PAGEHELPER_ROW_ID',
    key: 'PAGEHELPER_ROW_ID',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    align: 'center',
    fixed: 'left',
    width: 100,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '交接状态',
    dataIndex: 'deliveryStatus',
    width: 100,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '交接单类型',
    dataIndex: 'attribute5Desc',
    width: 120,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: 'AO',
    dataIndex: 'aoNo',
    width: 100,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '条码',
    dataIndex: 'barcode',
    width: 200,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '成品型号',
    dataIndex: 'mProductNumber',
    width: 200,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '图号',
    dataIndex: 'itemCode',
    width: 200,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '质量编号',
    dataIndex: 'qualityCode',
    width: 100,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '物料名称',
    dataIndex: 'itemName',
    width: 130,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '交接单号',
    dataIndex: 'deliveryPlanCode',
    width: 200,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '大件库位号',
    dataIndex: 'bulkyLocator',
    width: 130,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '标准件物料条码',
    dataIndex: 'attribute4Desc',
    width: 200,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '移交数量',
    dataIndex: 'deliveryQty',
    width: 100,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '接收数量',
    dataIndex: 'storageQty',
    width: 100,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '移交人工号',
    dataIndex: 'deliveryEmpCode',
    width: 130,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '需求单位',
    dataIndex: 'requireShop',
    width: 100,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '配送单位',
    dataIndex: 'deliveryShop',
    width: 100,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '移交时间',
    dataIndex: 'deliveryDate',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 200,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '接收时间',
    dataIndex: 'receiveDate',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 200,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '机型',
    dataIndex: 'productCode',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 100,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '批次',
    dataIndex: 'batchNo',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 100,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '起始架次',
    dataIndex: 'startLotNo',
    width: 100,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '截至架次',
    dataIndex: 'endLotNo',
    width: 100,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '合格证号',
    dataIndex: 'mesCheckQualitificationId',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 200,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '限用机型',
    dataIndex: 'xProductCode',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 120,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '限用批次',
    dataIndex: 'xLimitBatchNo',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 120,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '限用架次',
    dataIndex: 'xLimitLotNo',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 120,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: '交接单ID',
    dataIndex: 'wmsDeliveryPlanId',
    sortable: {
      sortDirections: ['ascend', 'descend'],
    },
    width: 200,
    ellipsis: true,
    tooltip: true,
  },
];
const booleanStore = useBooleanStore();
// 创建一个响应式的本地副本
const localTableData = ref<any>();
// 数据库一共有多少条
const total = ref<number>(0);
const pageNum = ref<number>(1);
const pageSize = ref<number>(10);
const QualityCodeModal = ref<boolean>();
const moreVisible = ref<boolean>();
const selectedKeys = ref<string[]>();
const quantityCode = ref<string>();
const password = ref<string>();
// 计算已选择的表格数据
const selectedTableData = computed(() => {
  return localTableData.value.filter((item: any) =>
    selectedKeys.value?.includes(item.PAGEHELPER_ROW_ID)
  );
});
const rowSelection = reactive({
  type: 'checkbox' as 'checkbox' | 'radio',
  showCheckedAll: true,
});
// 监听props.tableData的变化，并更新本地副本
watch(
  () => props.tableData,
  () => {
    localTableData.value = props.tableData?.result;
    total.value = props.tableData.pageParameter?.totalCount || 0;
    selectedKeys.value = [];
  },
  { immediate: true }
);
// 监听页面变化
watch([pageNum, pageSize], () => {
  booleanStore.setPage(pageNum.value, pageSize.value, 30);
});
// 监听已选择数据的序号，并更新到已选择表格数据行字段
function change(e: any) {
  pageNum.value = e;
}
function changeSize(e: any) {
  pageSize.value = e;
}
// 重推移交
async function recallDeliveryPlan() {
  if (selectedKeys.value?.length === 0) {
    Notification.warning({
      title: '提示',
      content: '请至少选择一条数据',
      closable: true,
    });
  } else {
    try {
      booleanStore.toggleBool(0);
      const response = await sendRecallDeliveryPlan({
        datas: selectedTableData.value,
        type: 'data',
      });
      Notification.success({
        title: '成功',
        content: response,
        closable: true,
      });
    } finally {
      booleanStore.toggleBool(0);
      selectedKeys.value = [];
    }
  }
}
async function recallInventory() {
  if (selectedKeys.value?.length === 0) {
    Notification.warning({
      title: '提示',
      content: '请至少选择一条数据',
      closable: true,
    });
  } else {
    try {
      booleanStore.toggleBool(0);
      const response = await sendRecallInventory({
        datas: selectedTableData.value,
        type: 'data',
      });
      Notification.success({
        title: '成功',
        content: response,
        closable: true,
      });
    } finally {
      booleanStore.toggleBool(0);
      selectedKeys.value = [];
    }
  }
}
async function reCallCoordinate() {
  try {
    booleanStore.toggleBool(0);
    if (selectedKeys.value?.length === 0) {
      Notification.warning({
        title: '提示',
        content: '请至少选择一条数据',
        closable: true,
      });
    } else {
      const response = await sendReCallCoordinate({
        datas: selectedTableData.value,
        type: 'data',
      });
      if (response.retCode === '200') {
        Notification.success({
          title: '成功',
          content: response.alert,
          closable: true,
        });
      } else {
        Notification.error({
          title: '失败',
          content: response.alert,
          closable: true,
        });
      }
    }
  } finally {
    booleanStore.toggleBool(0);
    selectedKeys.value = [];
  }
}
async function recallScanBack() {
  try {
    booleanStore.toggleBool(0);
    if (selectedKeys.value?.length === 0) {
      Notification.warning({
        title: '提示',
        content: '请至少选择一条数据',
        closable: true,
      });
    } else {
      const response = await sendRecallScanBack({
        datas: selectedTableData.value,
        type: 'data',
      });
      if (response.retCode === '200') {
        Notification.success({
          title: '成功',
          content: response.alert,
          closable: true,
        });
      } else {
        Notification.error({
          title: '失败',
          content: response.alert,
          closable: true,
        });
      }
    }
  } finally {
    booleanStore.toggleBool(0);
    selectedKeys.value = [];
  }
}

function openCode() {
  if (selectedKeys.value?.length !== 1) {
    Notification.warning({
      title: '提示',
      content: '请至少选择一条数据',
      closable: true,
    });
  } else {
    QualityCodeModal.value = true;
  }
}
// 保存质量编号修改
async function certainChangedQuality() {
  if (password.value === '123456') {
    await sendChangedQuantityCode({
      datas: selectedTableData.value,
      itemCode: quantityCode.value,
      type: 'data',
    });
    Notification.success({
      title: '成功',
      content: '修改完成',
      closable: true,
    });
    booleanStore.watchUpdate(14);
    selectedKeys.value = [];
    password.value = '';
  } else {
    Notification.error({
      title: '失败',
      content: '密码错误',
      closable: true,
    });
  }
}
// 修改交接单状态
async function updateDeliveryStatus() {
  if (selectedKeys.value?.length !== 1) {
    Notification.warning({
      title: '提示',
      content: '请选择一条数据',
      closable: true,
    });
  } else {
    const data = await sendUpdateDeliveryStatus({
      datas: selectedTableData.value,
      type: 'data',
    });
    if (data.code === '200') {
      Notification.success({
        title: '成功',
        content: data.msg,
        closable: true,
      });
      booleanStore.watchUpdate(14);
      selectedKeys.value = [];
    } else {
      Notification.error({
        title: '失败',
        content: data.msg,
        closable: true,
      });
    }
  }
}
async function showMore() {
  moreVisible.value = true;
}
// 推送移交
async function recallTabDevlieryPlan() {
  const data = await sendRecallTabDevlieryPlan({ datas: [], type: 'table' });
  if (data.code === 500) {
    Notification.error({
      title: '失败',
      content: data.message,
      closable: true,
    });
  } else {
    Notification.success({
      title: '成功',
      content: data,
      closable: true,
    });
  }
}
// 推送台账
async function recallTabInventory() {
  const data = await sendRecallTabInventory({ datas: [], type: 'table' });
  Notification.success({
    title: '成功',
    content: data,
    closable: true,
  });
}
// 推送出库
async function recallTabInvOut() {
  await sendRecallTabInvOut('');
  Notification.success({
    title: '成功',
    content: '完成',
    closable: true,
  });
}
// 推送占用
async function recallTabAllot() {
  await sendRecallTabAllot('');
  Notification.success({
    title: '成功',
    content: '完成',
    closable: true,
  });
}

async function cancel() {
  const data = await cancelTabAllot({
    datas: selectedTableData.value,
    type: 'data',
  });
  if (data.code === '200') {
    Notification.success({
      title: '成功',
      content: data.msg,
      closable: true,
    });
    booleanStore.watchUpdate(14);
    selectedKeys.value = [];
  } else {
    Notification.error({
      title: '失败',
      content: data.msg,
      closable: true,
    });
  }
}
</script>

<template>
  <a-space>
    <a-button type="primary" size="large" @click="recallDeliveryPlan">
      重推移交
    </a-button>
    <a-button type="primary" size="large" @click="recallInventory">
      重推台账
    </a-button>
    <a-button type="primary" size="large" @click="reCallCoordinate">
      重推协调
    </a-button>
    <a-button type="primary" size="large" @click="recallScanBack">
      重推扫码退回
    </a-button>
    <a-button type="primary" size="large" @click="openCode()"
      >修改质量编号
    </a-button>
    <a-button type="primary" size="large" @click="updateDeliveryStatus">
      修改交接单状态
    </a-button>
    <!-- <a-button type="primary" size="large" @click="showMore">
      更多功能
    </a-button> -->
    <a-button type="primary" size="large" @click="cancel"> 作废 </a-button>
  </a-space>

  <div style="margin-top: 8px">
    <a-table
      v-model:selected-keys="selectedKeys"
      :stripe="true"
      class="top-table"
      :pagination="false"
      :columns="columns"
      :data="localTableData"
      :row-selection="rowSelection"
      row-key="PAGEHELPER_ROW_ID"
      :scroll="{ y: 400 }"
    >
    </a-table>
    <div class="page-position">
      <a-pagination
        :total="total"
        :current="pageNum"
        :page-size="pageSize"
        show-total
        show-jumper
        show-page-size
        @change="change"
        @update:page-size="changeSize"
      />
    </div>
  </div>
  <a-modal
    v-model:visible="QualityCodeModal"
    @ok="certainChangedQuality"
    @cancel="() => (QualityCodeModal = false)"
  >
    <template #title> 质量编号修改 </template>
    <a-space direction="vertical" fill>
      <a-input
        v-model="quantityCode"
        placeholder="请输入修改后的质量编号"
        size="large"
        allow-clear
      />
      <a-input-password
        v-model="password"
        placeholder="请输入密码"
        size="large"
        allow-clear
      />
    </a-space>
  </a-modal>
  <a-modal
    v-model:visible="moreVisible"
    :footer="false"
    width="auto"
    @cancel="() => (moreVisible = false)"
  >
    <template #title> 重推 </template>
    <a-space direction="vertical" fill>
      <div class="flex">
        <a-button type="primary" size="large" @click="recallTabDevlieryPlan">
          推送移交
        </a-button>
        <div
          >重推指定配置表移交信息到ERP,ms_recall_tab需要设置的字段是wms_delivery_paln_id</div
        >
      </div>
      <div class="flex">
        <a-button type="primary" size="large" @click="recallTabInventory">
          推送台账
        </a-button>
        <div>
          重推指定配置表台账信息到ERP,ms_recall_tab需要设置的字段是wms_delivery_paln_id
        </div>
      </div>
      <div class="flex">
        <a-button type="primary" size="large" @click="recallTabInvOut">
          推送出库
        </a-button>
        <div>
          重推指定配置表出库到ERP,ms_recall_tab需要设置的字段是wms_inv_out_allotment_id;wms_delivery_paln_id字段无所谓,可以为随机值
        </div>
      </div>
      <div class="flex">
        <a-button type="primary" size="large" @click="recallTabAllot">
          推送占用
        </a-button>
        <div>
          重推指定配置表占用到ERP,ms_recall_tab需要设置的字段是wms_inv_out_allotment_id;wms_delivery_paln_id字段无所谓,可以为随机值
        </div>
      </div>
    </a-space>
  </a-modal>
</template>

<style scoped>
.top-table {
  white-space: nowrap;
}
.page-position {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex {
  display: flex;
  align-items: center;
  text-align: center;
}
</style>
